<template>
  <div>
    <div class="wrap">
      <div class="orderKindsWrap">
        <div class="kindsTitle">
          <img src="@/assets/warning.png" alt="" class="waringImg" />
          <em class="watting">{{
             resMenuInfo.status == 0
              ? "待付款"
              :
            resMenuInfo.status == 1
              ? "待处理"
              : resMenuInfo.status == 2
              ? "待送达"
              : resMenuInfo.status == 3
              ? "待评价"
              : resMenuInfo.status == 5
              ? "已取消"
              : resMenuInfo.status == 4
              ? "已评价"
              : ""
          }}</em>
        </div>
        <div class="explain" v-if="resMenuInfo.status == 3">
          您需要在{{ resTimeInfo.arriveTime }}分钟内评价该订单，超时自动好评
        </div>
        <div class="explain" v-if="resMenuInfo.status == 1">
          商家需要在{{ resTimeInfo.receiveTime }}分钟内处理该订单，超时该订单自动退款
        </div>
        <div class="explain" v-if="resMenuInfo.status == 2">
          商家需要在{{ resTimeInfo.arriveTime }}分钟内送达，超时可手动取消该订单
        </div>
        <div class="explain" v-if="resMenuInfo.status == 5">
          订单金额已原路退回至付款账户
        </div>
      </div>
      <div class="title">收货信息</div>
      <div class="infoList">
        <div class="left">
          <div class="infoItem">
            <img src="@/assets/name.png" alt="" />
            <em>{{ resMenuInfo.consigneeName }}</em>
          </div>
          <div class="infoItem">
            <img src="@/assets/tel.png" alt="" />
            <em>{{ resMenuInfo.userMobile }}</em>
          </div>
          <div class="infoItem">
            <img src="@/assets/addr2.png" alt="" />
            <em>{{ resMenuInfo.userAddress }}</em>
          </div>
        </div>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="title">商品信息</div>
      <div class="productionList" @click="jumpShopInfo">
        <div class="productionItem">
          <div class="proTitle">
            <div class="proLeft">
              {{ resMenuInfo.shopName }}
              <!-- <img src="@/assets/rightArrow.png" alt="" class="rightArrow2" /> -->
            </div>
            <!-- <div :class="{ proRight: resMenuInfo.status == 1 }">
              {{
                resMenuInfo.status == 1
                  ? "已退款"
                  : resMenuInfo.status == 2
                  ? "已拒绝"
                  : resMenuInfo.status == 3
                  ? "已取消"
                  : ""
              }}
            </div> -->
          </div>
          <div
            class="proIntroWrap"
            v-for="(item, index) in resMenuInfo.goodsList"
            :key="index"
          >
            <div class="proIntroLeft">
              <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
            </div>
            <div class="proIntroRight">
              <div class="proIntro">
                {{ item.goodsName }}
              </div>
              <div class="workTime">
                <div class="timeLeft">{{ item.specsName }} ×{{ item.payNum }}</div>
                <div class="saleRight"><em class="moneyLogo">￥</em>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="totalCount">
            总价¥{{ resMenuInfo.shouldPrice }}  配送费￥{{resMenuInfo.transPrice||0}} 优惠¥{{ resMenuInfo.disPrice || 0 }}
            <em class="realPay">实付</em>
            <em class="realMoney">￥{{ resMenuInfo.totalPayPrice }}</em>
          </div>
        </div>
      </div>
      <div class="title">订单信息</div>
      <div class="infoList">
        <div class="lineWrap">
          <div class="leftLine">订单编号</div>
          <div class="rightLine">{{ resMenuInfo.orderNum }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">订单优惠</div>
          <div class="rightLine">{{ resMenuInfo.couponName || "无" }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">订单备注</div>
          <div class="rightLine">{{ resMenuInfo.orderRemark || "无" }}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status != 0">
          <div class="leftLine">付款时间</div>
          <div class="rightLine">{{ resMenuInfo.payTime }}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 2 || resMenuInfo.status == 3|| resMenuInfo.status == 4">
          <div class="leftLine">接单时间</div>
          <div class="rightLine">{{ resMenuInfo.receiveTime }}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 3|| resMenuInfo.status == 4">
          <div class="leftLine">送达时间</div>
          <div class="rightLine">{{ resMenuInfo.reachTime }}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 5">
          <div class="leftLine">取消时间</div>
          <div class="rightLine">{{ resMenuInfo.cancelTime}}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 4">
          <div class="leftLine">完成时间</div>
          <div class="rightLine">{{ resMenuInfo.finishTime}}</div>
        </div>
      </div>
    </div>
    <div class="productRemark" v-if="resMenuInfo.status == 4">
      <div v-for="(item_,index_) in resMenuInfo.commentList" :key="index_" style="margin-bottom:20px;">
        <div class="remarkText">
          商品评价：{{item_.content}}
        </div>
        <div class="imgContainer">
          <img :src="$imgUrl+itemImg" alt="" class="remarkImg" v-for="(itemImg,indexImg) in item_.commentImg" :key="indexImg"/>
        </div>
      </div>
    </div>
    <div style="height:60px;"></div>
    <div class="bottomWrap" v-if="resMenuInfo.status == 2 && resMenuInfo.isCancel">
      <div class="sureSubmit" @click="newReciveMenu(5)" v-if="resMenuInfo.isCancel">
        取消订单
      </div>
    </div>
    <div class="bottomWrap" v-if="resMenuInfo.status == 3">
      <div class="sureSubmit" v-if="resMenuInfo.isAfter" @click="jumpApplyRefund">
        售后
      </div>
      <div class="sureSubmit sureSubmit2" @click="jumpRecomment">评价</div>
    </div>
    <div class="bottomWrap" v-if="resMenuInfo.status == 0">
      <div class="sureSubmit" v-if="resMenuInfo.isAfter" @click="jumpOrderSure">
        支付订单
      </div>
      <div class="sureSubmit sureSubmit2" @click="newReciveMenu(5)">取消订单</div>
    </div>
  </div>
</template>

<script>
import { Overlay } from "vant";
import {
  apiGetUserGoodsOrderDetails,
  apiTimeSetting,
  apiUpdateGoodsOrderStatus,
  apiShopGoodsOrderPay
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      id: this.$route.query.menuId,
      resMenuInfo: "",
      resTimeInfo: "",
    };
  },
  mounted() {
    this.getUserGoodsOrderDetails();
    this.getTimeSetting();
  },
  methods: {
    getTimeSetting() {
      apiTimeSetting({}).then((res) => {
        this.resTimeInfo = res.data;
        console.log("resTimeInfo", this.resTimeInfo);
      });
    },
    getUserGoodsOrderDetails() {
      apiGetUserGoodsOrderDetails({
        id: this.id,
      }).then((res) => {
        this.resMenuInfo = res.data;
        if(this.resMenuInfo.commentList.commentImg!=''){
          this.resMenuInfo.commentList.map(item=>{
            item.commentImg = item.commentImg.split(",");
          })
        }
        console.log("resMenuInfo", this.resMenuInfo);
      });
    },
    //更改订单状态：
    newReciveMenu(i) {
      apiUpdateGoodsOrderStatus({
        id: this.id,
        status: i,
      }).then((res) => {
        if (res.code == 200) {
          // var msg = (i == 2 ? "已接单" : "已送达");
          this.$toast.success('订单已取消');
          this.$router.push({
            path: "/pages/allOrderList",
            query: {
              //传递参数
            },
          });
        }
      });
    },
    //售后：
    jumpApplyRefund() {
      this.$router.push({
        path: "/pages/chooseAfterSaleList",
        query: {
          //传递参数
          menuId:this.id
        },
      });
    },
    //评价：
    jumpRecomment() {
      this.$router.push({
        path: "/pages/nowComment",
        query: {
          //传递参数
          resMenuInfo:this.resMenuInfo
        },
      });
    },
    jumpShopInfo() {
      this.$router.push({ 
        path: "/pages/shopInfo",
        query: {
          //传递参数
          shopId:this.resMenuInfo.shopId
        },
      });
    },
    jumpOrderSure(){
      this.getUserEnterOrderPay()
      // this.$router.push({ 
      //   path: "/pages/orderSure",
      //   query: {
      //     //传递参数
      //     shopId:this.resMenuInfo.shopId
      //   },
      // });
    },
     //根据订单id获取微信支付需要的信息
    getUserEnterOrderPay() {
      apiShopGoodsOrderPay({
        orderNum: this.resMenuInfo.orderNum,
      }).then((res) => {
        if (res.code == 200) {
          this.resPayInfo = res.data;
          console.log("微信支付相关信息", this.resPayInfo);
          this.onBridgeReady();
        }
      });
    },
    //调起微信支付：
    onBridgeReady() {
      // alert("sign:", this.resPayInfo.sign);
      var that = this;
      console.log("that.resPayInfo", that.resPayInfo);
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: that.resPayInfo.appId, //公众号ID，由商户传入
          timeStamp: that.resPayInfo.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.resPayInfo.nonceStr, //随机串
          package: that.resPayInfo.package,
          signType: that.resPayInfo.signType, //微信签名方式：
          paySign: that.resPayInfo.sign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            that.$toast.success("支付成功");
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$router.push({
              path: "/pages/allOrderList",
              query: {
                //传递参数
                status: -1,
              },
            });
          }
        }
      );
    },
  },
  created() {},
  components: {
    [Overlay.name]: Overlay,
  },
};
</script>

<style scoped>
.wrap {
  background: #f2f4fa;
  padding: 15px;
  min-height: calc(100vh - 70px);
}
.orderKindsWrap {
  width: calc(100% - 44px);
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 22px;
  margin-bottom: 20px;
}

.kindsTitle {
  font-size: 16px;
  font-weight: bold;
  color: #f9a31f;
  display: flex;
  justify-content: center;
}
.watting {
  /* padding-bottom: 10px; */
  align-items: center;
  display: inline-block;
  margin-top: 8px;
}
.waringImg {
  width: 45px;
  height: 45px;
}
.explain {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
}
.title {
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  margin: 9px 0px;
}
.infoList {
  overflow: hidden;
  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.left {
  float: left;
}
.infoItem {
  height: 20px;
  line-height: 20px;
  display: flex;
  margin-bottom: 15px;
}
.infoItem img {
  width: 17px;
  height: auto;
  align-items: center;
  padding-right: 15.5px;
}
.infoItem em {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.rightArrow {
  float: right;
  width: 5px;
  height: 9px;
  margin-top: 40px;
}

.productionList {
}
.productionItem {
  /* width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 130px;
  background: #ffffff;
  border-radius: 20px;
  padding: 15px;
  margin-top: 15px; */

  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.proLeft {
}
.proRight {
  background-color: #000;
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  font-size: 10px;
}
.rightArrow2 {
  width: 5px;
  height: 9px;
  padding-bottom: 1px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
   height: 75px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
  border-radius: 20px;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
.lineWrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.leftLine {
  font-size: 14px;
  font-weight: 600;
  color: #010101;
}
.rightLine {
  font-size: 14px;
  font-weight: 300;
  color: #010101;
}
.productRemark {
  width: calc(92% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin: 10px auto;
}
.remarkText {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.imgContainer {
}
.remarkImg {
  width: 80px;
  height: 60px;
  margin-right: 15px;
  margin-top: 18px;
  border-radius: 15px;
}
.bottomWrap {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: 0px;
}

.bottomWrap {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: 0px;
}

.sureSubmit {
  float: right;
  margin-right: 15px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 15px;
  text-align: center;
}

.sureSubmit2 {
  background-color: #fff;
  border: 1px solid #181818;
  color: #181818;
}
</style>
